<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>操作日志管理</title>
  <!--引入vue.js库-->
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
  <script src="/js/vue.js"></script>
  <!-- element-ui引入样式 展示数据的-->
  <link rel="stylesheet" href="/css/index.css">
  <!-- element-ui引入组件库 -->
  <script src="/js/index.js"></script>
  <!--引入axios库  从后端获取数据-->
  <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
  <script src="/js/axios.min.js"></script>
</head>
<body>
<div id="api">
  <!--搜索-->
  <el-row>
    <!--一行分为4列-->
    <el-col :span="6">
      <el-input v-model="searchForm.title" size="mini" placeholder="请输入模块标题"></el-input>
    </el-col>
    <!--    <el-col :span="3">-->
    <!--      <el-input v-model="searchForm.deptNo"  size="mini" placeholder="请输入部门编号"></el-input>-->
    <!--    </el-col>-->
    <el-col :span="4">
      &nbsp;&nbsp; <el-button type="success" icon="el-icon-search" size="mini" @click="search">搜索</el-button>&nbsp;
    </el-col>
    <el-col :span="14">&nbsp;</el-col>
  </el-row>
  <!--table 数据-->
  <el-table
          :data="tableData"
          style="width: 100%">
<!--    <el-table-column-->
<!--            prop="operId"-->
<!--            label="日志主键"-->
<!--            width="180">-->
<!--    </el-table-column>-->
    <el-table-column
            prop="title"
            label="模块标题"
            width="180">
    </el-table-column>
        <el-table-column
                prop="businessType"
                label="业务类型"
                width="180"
                :formatter="type">
        </el-table-column>
    <el-table-column
            prop="method"
            label="方法名称"
            width="180">
    </el-table-column>
    <el-table-column
            prop="operatorType"
            label="操作类别"
            width="180"
            :formatter="phone">
    </el-table-column>
    <el-table-column
            prop="operName"
            label="操作人员"
            width="180">
    </el-table-column>
    <el-table-column
            prop="deptName"
            label="部门名称"
            width="180">
    </el-table-column>
    <el-table-column
            prop="operUrl"
            label="请求URL"
            width="180">
    </el-table-column>
    <el-table-column
            prop="operIp"
            label="主机地址"
            width="180">
    </el-table-column>
    <el-table-column
            prop="operLocation"
            label="操作地点"
            width="180">
    </el-table-column>
    <el-table-column
            prop="operParam"
            label="请求参数"
            width="180">
    </el-table-column>
    <el-table-column
            prop="status"
            label="操作状态（0正常 1异常）"
            width="180"
            :formatter="status">
    </el-table-column>
    <el-table-column
            prop="errorMsg"
            label="错误消息"
            width="180">
    </el-table-column>
    <el-table-column
            prop="operTime"
            label="操作时间"
            width="180">
    </el-table-column>
  </el-table>
  <!--分页功能-->
  <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5,10,15,20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
  </el-pagination>
</div>
<script>
  //js代码
  var vue = new Vue({
    el:"#api",
    data(){//存放使用的所有属性数据
      return{ //方便编写表单校验
        tableData: [],//表格数据
        currentPage:1,//页码 第几页
        pageSize:5,//每页显示数量
        total:100,//分页总数量
        searchForm:{infoId:'',loginName:'',ipAddr:'',loginLocation:'',browser:'',os:'',status:'',msg:'',loginTime:''},//封装查询对象
      }
    },
    created:function (){
      this.loadData();
    },
    methods:{
      loadData(){
        //定义变量_this=tshi
        var _this = this;
        //axios向后台发请求
        axios.post('/operLog/queryPage', //请求的url
                {"pageNo":this.currentPage,"pageSize":this.pageSize,
                  "data":{"title":this.searchForm.title}})//请求参数  json格式
                .then(function (response) {//回调函数
                  //前端控制台打印  response 是json对象
                  console.log(response);
                  console.log(JSON.stringify(response));
                  //response获取后台数据时，一定加data  response.data相当于从响应的body中获取
                  if(response.data.code==200){
                    //这里面直接写this相当于axios对象 不是vue
                    // this.tableData = response.data.data.list; //错误的
                    _this.tableData = response.data.data.list;
                    _this.total = response.data.data.total;
                  }
                })
                .catch(function (error){//异常处理
                  console.log(error);
                });
      },
      //每页数量发生变化
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        //调用加载数据方法
        this. loadData();
      },
      //页码（第几页）发生变化
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage=val;
        //调用加载数据方法
        this. loadData();
      },
      //搜索方法
      search(){
        this.loadData();
      },
      //是否上线
      type(row, column, cellValue, index){
        var returnValue='';
        if (cellValue=='0'){
          returnValue="其他";
        }else if (cellValue=='1'){
          returnValue="新增";
        }else if (cellValue=='2'){
          returnValue="修改";
        }else if (cellValue=='3'){
          returnValue="删除"
        }
        return returnValue;
      },
      //是否上线
      phone(row, column, cellValue, index){
        var returnValue='';
        if (cellValue=='0'){
          returnValue="其他";
        }else if (cellValue=='1'){
          returnValue="后台用户";
        }else if (cellValue=='2'){
          returnValue="手机端用户";
        }
        return returnValue;
      },
      //是否上线
      status(row, column, cellValue, index){
        var returnValue='';
        if (cellValue=='0'){
          returnValue="正常";
        }else if (cellValue=='1'){
          returnValue="异常";
        }
        return returnValue;
      },
    }
  })
</script>
</body>
</html>